<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>面孔2016</title>
    <link rel="stylesheet" href="css/touchFunction.css">
    <link href="css/animate.min.css" type="text/css" rel="stylesheet">
    <link rel="stylesheet" href="css/page0.css">
    <link rel="stylesheet" href="css/page1.css">
    <link rel="stylesheet" href="css/page2.css">
    <link rel="stylesheet" href="css/page3.css">
    <link rel="stylesheet" href="css/page4.css">
    <link rel="stylesheet" href="css/page5.css">
    <link rel="stylesheet" href="css/page7.css">
    <link rel="stylesheet" href="css/page8.css">
    <script src="js/jquery-3.1.0.min.js"></script>
</head>
<body>

<!--BGM-->
<img src="img/musicBtn.png" id="bgn" class="rotate">
<audio src="music/bgm.mp3" autoplay id="audio"></audio>
<script>
    var btn = document.getElementById('bgn');
    var audio = document.getElementById('audio');
    btn.onclick = function () {
        if (audio.paused){
            audio.play();
            this.src = 'img/musicBtn.png';
        }else{
            audio.pause();
            this.src= 'img/musicBtnOff.png';
        }
    }
</script>

<!--页面-->
<div class="page-box">

    <!--begin-->
    <div class="page page0">
        <img src="img/0/bg.jpg" class="bg BGmoveLeftAndRight">

        <img src="img/0/head/fuyuanhui.jpg" class="head drop animation-delay2000ms">
        <img src="img/0/head/guochuan.jpg" class="head drop animation-delay1000ms">
        <img src="img/0/head/kobe.jpg" class="head drop animation-delay4500ms">
        <img src="img/0/head/lvbing.jpg" class="head drop animation-delay2500ms">
        <img src="img/0/head/sucai1.jpeg" class="head drop animation-delay500ms">
        <img src="img/0/head/sucai2.jpg" class="head drop">
        <img src="img/0/head/sucai3.jpg" class="head drop animation-delay1500ms">
        <img src="img/0/head/sucai4.jpg" class="head drop animation-delay4500ms">
        <img src="img/0/head/sucai5.jpg" class="head drop animation-delay500ms">
        <img src="img/0/head/sucai6.jpg" class="head drop">
        <img src="img/0/head/sucai7.jpg" class="head drop animation-delay2500ms">
        <img src="img/0/head/sucai8.jpg" class="head drop animation-delay4500ms">
        <img src="img/0/head/sucai9.jpg" class="head drop animation-delay2500ms">
        <img src="img/0/head/sucai10.jpg" class="head drop">
        <img src="img/0/head/sucai11.jpeg" class="head drop animation-delay3000ms">

        <img src="img/0/head/fuyuanhui.jpg" class="head drop animation-delay4500ms">
        <img src="img/0/head/guochuan.jpg" class="head drop">
        <img src="img/0/head/kobe.jpg" class="head drop animation-delay4500ms">
        <img src="img/0/head/lvbing.jpg" class="head drop animation-delay2500ms">
        <img src="img/0/head/sucai1.jpeg" class="head drop">
        <img src="img/0/head/sucai2.jpg" class="head drop animation-delay31000ms">
        <img src="img/0/head/sucai3.jpg" class="head drop animation-delay2500ms">
        <img src="img/0/head/sucai4.jpg" class="head drop animation-delay1000ms">
        <img src="img/0/head/sucai5.jpg" class="head drop animation-delay1500ms">
        <img src="img/0/head/sucai6.jpg" class="head drop animation-delay3000ms">
        <img src="img/0/head/sucai7.jpg" class="head drop">
        <img src="img/0/head/sucai8.jpg" class="head drop animation-delay3500ms">
        <img src="img/0/head/sucai9.jpg" class="head drop animation-delay3000ms">
        <img src="img/0/head/sucai10.jpg" class="head drop">
        <img src="img/0/head/sucai11.jpeg" class="head drop animation-delay1500ms">
        <img src="img/0/head/fuyuanhui.jpg" class="head drop">
        <img src="img/0/head/guochuan.jpg" class="head drop animation-delay3000ms">
        <img src="img/0/head/kobe.jpg" class="head drop animation-delay2500ms">
        <img src="img/0/head/lvbing.jpg" class="head drop animation-delay4500ms">
        <img src="img/0/head/sucai1.jpeg" class="head drop animation-delay500ms">
        <img src="img/0/head/sucai2.jpg" class="head drop animation-delay2000ms">
        <img src="img/0/head/sucai3.jpg" class="head drop">
        <img src="img/0/head/sucai4.jpg" class="head drop animation-delay1500ms">
        <img src="img/0/head/sucai5.jpg" class="head drop animation-delay4500ms">
        <img src="img/0/head/sucai6.jpg" class="head drop animation-delay2000ms">
        <img src="img/0/head/sucai7.jpg" class="head drop animation-delay1500ms">
        <img src="img/0/head/sucai8.jpg" class="head drop animation-delay2500ms">
        <img src="img/0/head/sucai9.jpg" class="head drop animation-delay4500ms">
        <img src="img/0/head/sucai10.jpg" class="head drop animation-delay2500ms">
        <img src="img/0/head/sucai11.jpeg" class="head drop animation-delay2500ms">

        <img src="img/0/miankong2016.png" class="title1 animated fadeIn animation-duration4s">
        <img src="img/0/zheyinian.png" class="title2 animation-delay5000ms animated bounceIn">
        <img src="img/0/yujian.png" class="title3 animation-delay5500ms animated slideInDown">

        <img src="img/0/meteor.png" class="meteor meteor1">
        <img src="img/0/meteor.png" class="meteor meteor2">
        <img src="img/0/meteor.png" class="meteor meteor3">


    </div>

    <!--聂颖 文佳-->
    <div class="page page1 hidden">
        <img src="img/bg.png" class="bg">
        <img src="img/title1.png" class="title1 animated bounceIn">
        <img src="img/sunyang.png" class="sunyang animated lightSpeedIn animation-delay1500ms">
        <img src="img/fu.png" class="fu animated lightSpeedIn animation-delay500ms">
        <img src="img/zjk.png" class="zjk animated lightSpeedIn animation-delay2000ms">
        <!--<img src="img/girl.png" class="girl animated lightSpeedIn animation-delay2500ms">-->
        <img src="img/nvpai.png" class="nvpai animated lightSpeedIn animation-delay3500ms">


        <img src="img/sun2.png" class="sun2 animated fadeIn animation-delay6500ms">
        <img src="img/sunwen.png" class="sunwen animated  rotateInDownLeft animation-delay7000ms">

        <img src="img/nvpai2.png" class="nvpai2 animated fadeIn animation-delay9500ms">
        <img src="img/guanjun.png" class="guanjun animated  bounceInDown animation-delay10000ms">
        <img src="img/word1.png" class="word1 animated fadeIn animation-delay15000ms">
        <!--<img src="img/shenzhou.png" class="shen animated fadeIn animation-delay10000ms">
        <img src="img/shenwen.png" class="shenwen animated rollIn animation-delay10000ms">-->-->

    </div>

    <!--廖恒举 杨莹-->
    <div class="page page2 hidden">
        <img src="img/qianguai.jpg" class="qianguan animated fadeIn animation-delay500ms"/>
        <img src="img/title.png" class="title animated rotateIn animation-delay1500ms"/>
        <img src="img/xujiali.jpg" class="xujiali animated fadeIn animation-delay5000ms"/>
        <img src="img/fanhcuan.png" class="fanchuan animated fadeInUpBig animation-delay5500ms"/>
        <img src="img/xu-name.png" class="xu-name animated bounceIn animation-delay5500ms"/>
        <img src="img/xu-content.png" class="xutxt animated bounceInUp animation-delay6500ms"/>
        <img src="img/lvbin.jpg" class="lvbin animated fadeInUp animation-delay10000ms"/>
        <img src="img/lvbin-content.png" class="lv-content animated rotateInDownRight animation-delay10000ms"/>
        <img src="img/kobe.jpg" class="kobe animated fadeIn animation-delay14000ms"/>
        <img src="img/kebi-name.png" class="kobe-name animated fadeInLeftBig animation-delay15000ms"/>
        <img src="img/zijin.png" class="kobe-zijin animated fadeInRightBig animation-delay15000ms"/>
        <img src="img/24.png" class="tf animated fadeInDownBig animation-delay15000ms"/>
        <img src="img/kuang.png" class="kuang animated rotateInDownLeft animation-delay15000ms"/>
    </div>

    <!--石浩成-->
    <div class="page page3 hidden">
        <img src="img/title3.png" class="title3"/>

        <!--<p class="yuangengp animated fadeInRight animation-delay1000ms">改革探索者袁庚逝世 老人一生堪称传奇</p>-->
        <img src="img/yuangeng.jpg" class="yuangeng animated fadeInRight animation-delay1000ms"/>
        <!--<p class="yansup animated fadeInRight animation-delay3000ms">大师忠魂陨落 艺术生命长存</p>-->
        <img src="img/yansu.jpg" class="yansu animated fadeInRight animation-delay3000ms"/>
        <!--<p class="songwencongp animated fadeInLeft animation-delay5000ms">歼10之父去世 昔日同事共追忆</p>-->
        <img src="img/congwencong.jpg" class="songwencong animated fadeInLeft animation-delay5000ms">
        <!--<p class="yangjiangp animated fadeInDown animation-delay7000ms">“我生活得很充实，因为有我们仨”</p>-->
        <img src="img/yangjiang.jpg" class="yangjiang animated fadeInDown animation-delay7000ms">
        <script>
            $('.yangjiang').on('webkitAnimationEnd',function () {
                $('.yuangeng').removeClass('fadeInRight').addClass('gogogo');
                $('.yansu').removeClass('fadeInRight').addClass('gogogo1');
                $('.songwencong').removeClass('fadeInLeft').addClass('gogogo2');
                $('.yangjiang').removeClass('fadeInDown').addClass('gogogo3');
            })
        </script>
    </div>

    <!--曾甚晶-->
    <div class="page page4 hidden">
        <img src="img/world.jpg" class="world" />
        <img src="img/title4.png" class="title4 animated wobble" />
        <img src="img/english.jpg" class="english animated bounceInLeft animation-delay2000ms" />
        <img src="img/english-text.png" class="english-text animated bounceInRight animation-delay2500ms" />
        <img src="img/Korea.jpg" class="korea animated bounceInDown animation-delay5000ms" />
        <img src="img/Korea-crisis.png" class="Korea-crisis animated bounceIn animation-delay5500ms " />
        <img src="img/nieshubin.jpg" class="nieshubin animated bounceInDown animation-delay8000ms" />
        <img src="img/neishubin-text.png" class="neishubin-text animated bounceInDown animation-delay9000ms"/>
    </div>

    <!--陈静 陈瑞秀-->
    <div class="page page5 hidden">
        <img src="img/bg.jpg" class="bg page5-bgIn"/>
        <img src="img/title1-1.png" class="tittle page5-translate page5-bgIn animation-delay1500ms"/>
        <img src="img/running.png" class="run animated rotateInDownRight animation-delay4000ms"/>
        <img src="img/baolun.jpg" class="baolun animated flipOutY page5-opcity animation-delay6000ms"/>
        <img src="img/baolunTxt.jpg" class="baolunTxt animated rollIn animation-delay6500ms"/>
        <script type="text/javascript">
            $('.page5 .baolunTxt').on('webkitAnimationEnd',function() {
                $(this).removeClass('page5-opcity animation-delay6500ms').addClass('rollOut animation-delay1000ms');
                $(this).off('webkitAnimationEnd');
            })
        </script>
        <script type="text/javascript">
            $('.page5 .baolun').on('webkitAnimationEnd',function() {
                $(this).removeClass('page5-opcity animation-delay6000ms').addClass('flipOutY animation-delay3000ms');
                $(this).off('webkitAnimationEnd');
            })
        </script>
        <img src="img/xiaolizi.jpg" class="xiaolizi animated rotateInDownRight animation-delay11000ms"/>
        <img src="img/xiaoliziTxt.jpg" class="xiaoliziTxt animated bounceInUp animation-delay12500ms"/>
        <img src="img/lai.jpg" class="lai animated fadeInUp animation-delay13500ms"/>
        <img src="img/lai2.jpg" class="lai2 animated fadeInUp animation-delay14500ms"/>
    </div>

    <!--------------------------page7(李松红)开始---------------->
    <div class="page page7 hidden">
        <img src="img/fire.jpg" class="fire"/>
        <img src="img/title6.png" class="title animated swing animation-delay500ms"/>
        <img src="img/li1.png" class="li1   page7fadeInLeft animation-delay1000ms"  />
        <img src="img/li2.png" class="li2  page7fadeInRight  animation-delay1500ms"/>
        <img src="img/li3.png" class="li3 page7fadeInDown  animation-delay2000ms"/>
        <img src="img/air.jpg" class="air  animation-delay9000ms   page7hinge"/>
        <img src="img/hongqi.jpg" class="hongqi page7fadeIn animation-delay4000ms"/>
        <script type="text/javascript">
            $('.page7 .hongqi').on('webkitAnimationEnd', function (argument) {
                $(this).removeClass('page7fadeIn').addClass('page7run');
                $(this).off('webkitAnimationEnd');
            })
        </script>
        <img src="img/air1.png" class="airtitle1 page7rubberBand animation-delay8000ms" />
        <img src="img/air2.png" class="airtitle2 page7rubberBand animation-delay8000ms"/>
    </div>
    <!--------------------------page7(李松红)j结束--------------------->

    <!--end-->
    <div class="page page8 hidden">
        <img src="img/page8/bg.png" class="bg BGpage8Move">


        <img src="img/0/head/fuyuanhui.jpg" class="head light animation-delay2000ms">
        <img src="img/0/head/guochuan.jpg" class="head light animation-delay1000ms">
        <img src="img/0/head/kobe.jpg" class="head light animation-delay4500ms">
        <img src="img/0/head/lvbing.jpg" class="head light animation-delay2500ms">
        <img src="img/0/head/sucai1.jpeg" class="head light animation-delay500ms">
        <img src="img/0/head/sucai2.jpg" class="head light">
        <img src="img/0/head/sucai3.jpg" class="head light animation-delay1500ms">
        <img src="img/0/head/sucai4.jpg" class="head light animation-delay4500ms">
        <img src="img/0/head/sucai5.jpg" class="head light animation-delay500ms">
        <img src="img/0/head/sucai6.jpg" class="head light">
        <img src="img/0/head/sucai7.jpg" class="head light animation-delay2500ms">
        <img src="img/0/head/sucai8.jpg" class="head light animation-delay4500ms">
        <img src="img/0/head/sucai9.jpg" class="head light animation-delay2500ms">
        <img src="img/0/head/sucai10.jpg" class="head light">
        <img src="img/0/head/sucai11.jpeg" class="head light animation-delay3000ms">

        <img src="img/0/head/fuyuanhui.jpg" class="head light animation-delay4500ms">
        <img src="img/0/head/guochuan.jpg" class="head light">
        <img src="img/0/head/kobe.jpg" class="head light animation-delay4500ms">
        <img src="img/0/head/lvbing.jpg" class="head light animation-delay2500ms">
        <img src="img/0/head/sucai1.jpeg" class="head light">
        <img src="img/0/head/sucai2.jpg" class="head light animation-delay31000ms">
        <img src="img/0/head/sucai3.jpg" class="head light animation-delay2500ms">
        <img src="img/0/head/sucai4.jpg" class="head light animation-delay1000ms">
        <img src="img/0/head/sucai5.jpg" class="head  light animation-delay1500ms">
        <img src="img/0/head/sucai6.jpg" class="head light animation-delay3000ms">
        <img src="img/0/head/sucai7.jpg" class="head light">
        <img src="img/0/head/sucai8.jpg" class="head light animation-delay3500ms">
        <img src="img/0/head/sucai9.jpg" class="head light animation-delay3000ms">
        <img src="img/0/head/sucai10.jpg" class="head light">
        <img src="img/0/head/sucai11.jpeg" class="head light animation-delay1500ms">
        <img src="img/0/head/fuyuanhui.jpg" class="head light">
        <img src="img/0/head/guochuan.jpg" class="head light animation-delay3000ms">
        <img src="img/0/head/kobe.jpg" class="head light animation-delay2500ms">
        <img src="img/0/head/lvbing.jpg" class="head light animation-delay4500ms">
        <img src="img/0/head/sucai1.jpeg" class="head  light animation-delay500ms">
        <img src="img/0/head/sucai2.jpg" class="head light animation-delay2000ms">
        <img src="img/0/head/sucai3.jpg" class="head light">
        <img src="img/0/head/sucai4.jpg" class="head light animation-delay1500ms">
        <img src="img/0/head/sucai5.jpg" class="head light animation-delay4500ms">
        <img src="img/0/head/sucai6.jpg" class="head light animation-delay2000ms">
        <img src="img/0/head/sucai7.jpg" class="head light animation-delay1500ms">
        <img src="img/0/head/sucai8.jpg" class="head light animation-delay2500ms">
        <img src="img/0/head/sucai9.jpg" class="head light animation-delay4500ms">
        <img src="img/0/head/sucai10.jpg" class="head light animation-delay2500ms">
        <img src="img/0/head/sucai11.jpeg" class="head light animation-delay2500ms">

        <img src="img/page8/2016.png" class="title1 animated bounceInDown">
        <img src="img/page8/niden.png" class="title2 animated animated flipInY animation-delay1000ms">
        <img src="img/page8/youshui.png" class="title3 animated rotateInDownLeft animation-delay1500ms">

        <img src="img/page8/flight.png" class="flight flightMove">
    </div>
</div>
<script src="js/touchFunction.js"></script>
</body>
</html>